﻿@page "/chart/error-bar"

@using Syncfusion.Blazor
@using Syncfusion.Blazor.Charts
@using PointRender

@inject NavigationManager NavigationManager
@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample shows the errors in the distribution of a car for a certain region with an error bar in the chart.</p>
</SampleDescription>
<ActionDescription>
    <p>
        In this example, you can see how to render and configure the error bar chart. The error bar chart type is used to indicate an error or uncertainty in the reported measurement.
    </p>
    <p> The chart supports the following error bar types.</p>
    <ul>
        <li> <code>Fixed</code> - Renders a fixed type error bar. </li>
        <li><code>Percentage</code> - Renders a percentage type error bar. </li>
        <li> <code>StandardDeviation</code> - Renders a standard deviation type error bar. </li>
        <li> <code>StandardError</code> - Renders a standard error type error bar.  </li>
        <li><code>Custom</code> - Renders a custom type error bar. </li>
    </ul>
    <p><code>Tooltip</code> is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.</p>
    <p>More information about the error bar can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/chart/chart-types/error-bar'>documentation section</a>.</p>
</ActionDescription>

<div class="control-section">
    <SfChart Title="Sales Distribution of Car by Region" Theme="@Theme">
        <ChartArea><ChartAreaBorder Width="0"></ChartAreaBorder></ChartArea>
        <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category" Interval="1">
            <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
        </ChartPrimaryXAxis>
        <ChartPrimaryYAxis LabelFormat="{value}%" Minimum="15" Maximum="45">
            <ChartAxisLineStyle Width="0"></ChartAxisLineStyle>
            <ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>
        </ChartPrimaryYAxis>
        <ChartSeriesCollection>
            <ChartSeries DataSource="@ChartPoints" Name="Sales" XName="Country" YName="SalesDistribution" Type="ChartSeriesType.Scatter">
                <ChartMarker Height="10" Width="10">
                </ChartMarker>
                <ChartErrorBarSettings Visible="true" HorizontalError="3" VerticalError="3"></ChartErrorBarSettings>
            </ChartSeries>
        </ChartSeriesCollection>
        <ChartTooltipSettings Enable="true"></ChartTooltipSettings>
        <ChartLegendSettings Visible="false"></ChartLegendSettings>
        <ChartEvents OnPointRender="PointRender"></ChartEvents>
    </SfChart>
</div>

@code{

    private Theme Theme { get; set; }
    public List<ErrorBarData> ChartPoints { get; set; } = new List<ErrorBarData>
    {
        new ErrorBarData { Country = "IND", SalesDistribution = 24 },
        new ErrorBarData { Country = "AUS", SalesDistribution = 20 },
        new ErrorBarData { Country = "USA", SalesDistribution = 35 },
        new ErrorBarData { Country = "DEU", SalesDistribution = 27 },
        new ErrorBarData { Country = "ITA", SalesDistribution = 30 },
        new ErrorBarData { Country = "UK",  SalesDistribution = 41 },
        new ErrorBarData { Country = "RUS", SalesDistribution = 26 }
    };

    protected override void OnInitialized()
    {
        this.SetTheme(null);
    }

    public void PointRender(PointRenderEventArgs args)
    {
        this.SetTheme(args);
    }

    private void SetTheme(PointRenderEventArgs args)
    {
        if (NavigationManager.Uri.IndexOf("material") > -1)
        {
            if (args == null)
                Theme = Theme.Material;
            else
                args.Fill = PointColor.MaterialColors[args.Point.Index % 10];
        }
        else if (NavigationManager.Uri.IndexOf("fabric") > -1)
        {
            if (args == null)
                Theme = Theme.Fabric;
            else
                args.Fill = PointColor.FabricColors[args.Point.Index % 10];
        }
        else if (NavigationManager.Uri.IndexOf("bootstrap") > -1)
        {
            if (args == null)
                Theme = Theme.Bootstrap;
            else
                args.Fill = PointColor.BootstrapColors[args.Point.Index % 10];
        }
        else if (NavigationManager.Uri.IndexOf("highcontrast") > -1)
        {
            if (args == null)
                Theme = Theme.HighContrast;
            else
                args.Fill = PointColor.HighContrastColors[args.Point.Index % 10];
        }
        else
        {
            if (args == null)
                Theme = Theme.Bootstrap4;
            else
                args.Fill = PointColor.BootstrapColors[args.Point.Index % 10];
        }
    }

    public class ErrorBarData
    {
        public string Country { get; set; }
        public double SalesDistribution { get; set; }
    }
}
